<template>
  <div class="orderdetails">
    <div class="header">
      <span class="title">订单详情</span>
    </div>
    <div class="header-a"></div>
    <div class="address">
      <div class="address-box">
        <div class="address-icons">
          <img :src="images8" class="images8">
        </div>
        <div class="address-name">
          收货人：{{orderlist.receiveName}}
          <span class="phone">{{orderlist.receivePhone}}</span>
        </div>
        <div class="address-place">{{orderlist.receiveAddr}}</div>
        <div class="address-iconsright">
          <img :src="images5" class="images5">
        </div>
      </div>
    </div>

    <div class="paymentgoods">
      <div class="body-top">
        <span class="icon-pic">
          <img :src="images9" class="images9">
        </span>
        <span class="companyname">华夏黉</span>
      </div>
      <div class="paymentgoods-box" v-for="item in orderlist.orderItems" :key="item.id">
        <router-link
                        tag="div"
                class="paymentgoods-picture"
                :to="{name:'Detail',
              query:{
                id:item.goodsId
              }
              }"><img :src="JSON.parse(item.goodsPic)"></router-link>
        <div class="paymentgoods-title">
          <div class="paymentgoods-title-introduce">{{item.goodsName}}{{item.goodsIntro}}</div>
          <div class="box">
            <div class="paymentgoods-title-category">{{value}}</div>
            <div class="refund" @click="refund" v-if="vif" v-show="refunds">申请退款</div>
            <div class="refunds" v-show="waitepay" v-else>{{texts}}</div>
            <div class="refund" v-show="tuikuan">已退款</div>
            <div class="ordermode">{{item.dealModeName}}</div>
          </div>

          <!-- <div class="ordergo">发货时间</div> -->

          <div class="num">X{{item.buyNum}}</div>
        </div>
        <div class="bottom" v-if="bottom">
          <div class="left" @click="payreturn(item)">申请退款</div>
          <div class="center" @click="gologistics(item)">查看物流</div>
          <div class="right" @click="sure(item)">确认收货</div>
        </div>
      </div>
      <div class="btns" v-show="shows">
        <div class="text" v-if="show"  @click="pickup">查看取货码</div>
      </div>
      <!-- <div class="btnss">{{pickUpToken}}</div> -->
      <div class="ordercenter">
        <div class="ordertext">订单信息</div>
        <div class="ordernum">订单编号&nbsp;&nbsp;{{orderlist.orderNo}}</div>
        <div class="orderbecome">{{patime}}&nbsp;&nbsp;{{orderlist.orderlist}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import pic5 from "../../icons/right.png";
import pic8 from "../../icons/address.png";
import pic9 from "../../icons/shop.png";
import { MessageBox } from "mint-ui";
import * as api from "../../request/api.js";
export default {
  name: "Orderdetails",
  data() {
    return {
      images5: pic5,
      images8: pic8,
      images9: pic9,
      id: "",
      orderlist: "",
      shows: "",
      goodsAttrId: "",
      pickUpToken: "",
      value: "",
      orderChildId: "",
      goodsId: "",
      vif: "",
      show: "",
      bottom: '',
      waitepay: true,
      tuikuan: "",
      refunds: true,
      texts:'',
      patime:''
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.$http({
      method: "post",
      url: api.ORDERDETAIL,
      data: {
        id: this.id
      }
    })
      .then(resp => {
        console.log(resp.data.data, "ss");
        this.orderlist = resp.data.data;
          if(resp.data.data.payStatus==1){
          this.texts=`等待买家付款`
          this.patime=`等待付款时间`
          } 
          if(resp.data.data.payStatus==2){
            this.texts=`买家已付款`
            this.patime=`付款时间`
          }
          if(resp.data.data.payStatus==4  ){
            this.texts=`卖家已发货`
            this.patime=`发货时间`
          }
          if(resp.data.data.payStatus==8){
            this.texts=`买家申请退款退货`
          }
          if(resp.data.data.payStatus==12){
            this.texts=`卖家同意退款退货`
          }
          if(resp.data.data.payStatus==12){
            this.texts=`买家退款退货已发货`
          }
          if(resp.data.data.payStatus==68){
            this.texts=`买家已收货`
          }
          if(resp.data.data.payStatus==60){
            this.texts=`买家待自提`
          }
            if(resp.data.data.payStatus==65){
            this.texts=`买家已自提`
          }
            if(resp.data.data.payStatus==80){
            this.texts=`已退款`
          }
            if(resp.data.data.payStatus===70){
            this.texts=`待评价`
          }
        resp.data.data.orderItems.forEach(item => {
          if (item.dealModeId == 1) {
            this.shows = true;
          }
          if (item.dealModeId == 2 && resp.data.data.payStatus==4) {
            this.bottom = true;
          }
          this.orderChildId = item.orderChildId;
          if (item.orderChildId == null) {
            this.vif = false;
            this.show = false;
          } else {
            this.vif = true;
            this.show = true;
          }
          if (item.transactionStatus == 80) {
            (this.waitepay = false),
              (this.tuikuan = true),
              (this.refunds = false),
              (this.show = false);
          }
          this.goodsId = item.goodsId;
          console.log(item.orderChildId);
          JSON.parse(item.goodsAttrSpecInfo).forEach(items2 => {
            // console.log(items2.value)
            this.value = items2.value;
          });
          this.goodsAttrId = item.goodsAttrId;
        });
        console.log(this.orderChildId);
      })
      .catch(resp => {});

    // if(this.orderChildId !== null){
    //     this.vif=true
    //   this.show=true
    // }
  },
  methods: {
    pickup() {
      this.$http({
        method: "post",
        url: api.PICKUPINFO,
        data: {
          id: this.orderChildId
        }
      })
        .then(resp => {
          console.log(resp, this.orderChildId, resp.data.data.pickUpToken);
          if (resp.data.code == -1) {
            alert("订单已提取");
          } else {
            this.pickUpToken = resp.data.data.pickUpToken;
            this.$router.push({
              path: "./qrcode",
              query: {
                pickUpToken: resp.data.data.pickUpToken,
                goodsId: this.goodsId
              }
            });
          }
        })
        .catch(resp => {
          console.log(resp);
        });
    },
    refund() {
      MessageBox.confirm("申请退款").then(action => {
        if (action == "confirm") {
          this.$http({
            method: "post",
            url: api.REFUND,
            data: {
              id: this.orderChildId
            }
          })
            .then(resp => {
              console.log(resp);
              if(resp.data.success==true){
                this.$router.push({path:"./payreturn"})
              }
            })
            .catch(resp => {});
        }
      });
    },
    sure(item) {
      const than = this;
      that
        .$http({
          method: "post",
          url: api.ORDERCONFIRM,
          data: {
            id: item.orderChildId
          }
        })
        .then(resp => {
          if (resp.data.success == true) {
            this.sure = false;
          }
        });
    },
    gologistics(item) {
      this.$router.push({
        path: "./logistics",
        query: {
          id: item.orderId,
          orderChildId: item.orderChildId
        }
      });
    },
    payreturn(item){
      const that=this;
      that.$http({
        method:'post',
        url:api.PAYRETURN,
        data:{
          id:item.orderChildId
        }
      })
      .then(resp=>{
        if(resp.data.success=true){
         that.$router.push({
           path:'./payreturn'
         })
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../less/orderdetails.less";
</style>
